<template>
	<view class="qilin-index">
		<!-- bannar横幅图 -->
		<view class="qilin-index-banner">
			<swiper 
				class="swiper"
				circular
				indicator-dots
				autoplay
				interval="3500"
			>
				<swiper-item
					class="swiper-item"
					v-for="(item,index) in bannerList"
					:key="index"
				>
					<image 
						class="swiper-item-image"
						:src="item.imageUrl"
					></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 消息公告 -->
		<view class="qilin-index-infoNotice">
			<swiper 
				class="swiper"
				vertical
				circular
				autoplay
				interval="5000"
			>
				<swiper-item 
					class="swiper-item"
					v-for="(item,index) in infoList"
					:key="index"
				>
					<view class="infoNotice-item">
						<view class="infoNotice-item-title">{{item.title}}</view>
						<view class="infoNotice-item-link">{{item.content}}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 导航栏 -->
		<view class="qilin-index-nav">
			<scroll-view 
				class="qilin-index-nav-list"
				scroll-x
				show-scrollbar
			>
				<view class="qilin-index-nav-list-item"
					v-for="item in categoryList"
					:key="item.id"
					@click="switchNav(item)"
				>
					<view>
						<image :src="item.imageSrc"></image>
						<text>{{item.name}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 分块展示 -->
		<view class="qilin-index-grid flex-row">
			<view class="qilin-index-grid-left flex-column" @click="addAuthor()">
				<image src="https://wx1.sinaimg.cn/bmiddle/006aaKeggy1hwq86wq2ssj30m813ndjo.jpg"></image>
				<view class="title">加作者好友</view>
				<view class="content">免费获得封装组件</view>
				<view class="tip">永久有效</view>
			</view>
			<view class="qilin-index-grid-right">
				<view class="qilin-index-grid-right-item flex-row">
					<view class="item flex-row" @click="recommandProject()">
						<image src="https://wx2.sinaimg.cn/bmiddle/006aaKeggy1hwq7dcwf77j30ht0b60wg.jpg"></image>
						<text>推荐项目</text>
					</view>
					<view class="item flex-row" @click="friendLink()">
						<image src="@/static/images/index/link.jpg"></image>
						<text>友情链接</text>
					</view>
				</view>
				<view class="qilin-index-grid-right-item flex-row">
					<image src="https://wx1.sinaimg.cn/bmiddle/006aaKeggy1hwq86wq2ssj30m813ndjo.jpg"></image>
					<view class="title single-ellipsis">小猿好物 | 办公物品/解压神气/摸鱼圣体/薪贫气和</view>
				</view>
				<view class="qilin-index-grid-right-item flex-row">
					<image src="https://wx1.sinaimg.cn/bmiddle/006aaKeggy1hwq86wq2ssj30m813ndjo.jpg"></image>
					<view class="title single-ellipsis">免费体验 Qilin多款二次开发组件库以及工具库</view>
				</view>
			</view>
		</view>
		<!-- 项目展示 -->
		<view class="qilin-index-project">
			<view class="qilin-index-project-title flex-row">
				<text>项目展示</text>
				<text>全部</text>
			</view>
			<view class="qilin-index-project-list">
				<view class="qilin-index-project-list-item">
					<view class="qilin-index-project-list-item-content">
						<image src="https://wx1.sinaimg.cn/bmiddle/006aaKeggy1hwq7deq29uj31hf0o87kn.jpg"></image>
						<view class="mark">Qilin项目</view>
						<view class="description single-ellipsis">【PC端】U创办公管理系统，基于vue3+vite开发</view>
					</view>
					<view class="qilin-index-project-list-item-footer">
						<view class="title">U创办公管理系统</view>
						<view class="board flex-row">
							<text>2023-12-01</text>
							<view class="board-operation flex-row">
								<view class="board-operation-item flex-row">
									<uv-icon name="eye-fill" size="16"></uv-icon>
									<text>100</text>
								</view>
								<view class="board-operation-item flex-row">
									<uv-icon name="thumb-up-fill" size="16"></uv-icon>
									<text>45</text>
								</view>
								<view class="board-operation-item flex-row">
									<uv-icon name="share-fill" size="16"></uv-icon>
									<text>24</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部空白占位部分 -->
		<view style="height: 100px;width: 100%;"></view>
		<!-- 模态框区域 -->
		<!-- 关于Qilin -->
		<uv-modal 
			ref="modalRef1"
			:showConfirmButton="false"
			:negativeTop="0"
		>
			<aboutAuthor style="width:100%;"></aboutAuthor>
		</uv-modal>
	</view>
</template>

<script setup>
import {reactive,ref} from "vue";
import aboutAuthor from "./components/aboutAuthor.vue";


/*
    响应式选项区域
*/
defineOptions({
	options:{
		styleIsolation:"shared" //解除样式隔离
	}
});


/*
    数据变量定义区域
*/
// banner图片数据集
const bannerList = reactive([
	{
		imageUrl: 'https://cdn.zhoukaiwen.com/zjx_banner.png'
	},
	{
		imageUrl: 'https://cdn.zhoukaiwen.com/zjx_banner3.png'
	},
	{
		imageUrl: 'https://cdn.zhoukaiwen.com/zjx_banner1.png'
	},
	{
		imageUrl: 'https://cdn.zhoukaiwen.com/zjx_banner2.png'
	}
]);
// 消息公告数据集
const infoList = reactive([
	{
		title:"qilin-element3x二次源组件库已发布上线",
		content:"点击查看最新官网链接地址"
	},
	{
		title:"qilin-utils库已发布上线",
		content:"点击查看最新官网链接地址"
	}
]);
// 导航栏数据集
const categoryList = reactive([
	{
		name:"招募开发者",
		imageSrc:"https://wx1.sinaimg.cn/bmiddle/006aaKeggy1hwq86wq2ssj30m813ndjo.jpg",
		id:1
	},
	{
		name:"关于Qilin-app",
		imageSrc:"https://wx1.sinaimg.cn/bmiddle/006aaKeggy1hwq7db7w5lj30zk0n5dhm.jpg",
		id:2
	},
	{
		name:"诗词合集",
		imageSrc:"https://wx2.sinaimg.cn/bmiddle/006aaKeggy1hwq78k9xmij32qf43nx6r.jpg",
		id:3
	},
	{
		name:"开发文档",
		imageSrc:"https://wx1.sinaimg.cn/bmiddle/006aaKeggy1hwq86wq2ssj30m813ndjo.jpg",
		id:4
	},
	{
		name:"学习笔记",
		imageSrc:"https://wx1.sinaimg.cn/bmiddle/006aaKeggy1hwq86wq2ssj30m813ndjo.jpg",
		id:5
	},
	{
		name:"文章资讯",
		imageSrc:"https://wx1.sinaimg.cn/bmiddle/006aaKeggy1hwq86wq2ssj30m813ndjo.jpg",
		id:6
	},
	{
		name:"进阶方向",
		imageSrc:"https://wx1.sinaimg.cn/bmiddle/006aaKeggy1hwq86wq2ssj30m813ndjo.jpg",
		id:7
	},
	{
		name:"个人主页",
		imageSrc:"https://wx1.sinaimg.cn/bmiddle/006aaKeggy1hwq86wq2ssj30m813ndjo.jpg",
		id:8
	},
	{
		name:"打赏作者",
		imageSrc:"https://wx1.sinaimg.cn/bmiddle/006aaKeggy1hwq86wq2ssj30m813ndjo.jpg",
		id:9
	}
]);
// 获取模态框元素DOM
const modalRef1 = ref(null);


/*
    计算属性等代码区域
*/


/*
    逻辑脚本代码区域
*/
// 点击导航栏各模块事件监听
const switchNav=(obj)=>{
	switch (obj.id) {
		case 2 : //关于Qilin
			modalRef1.value.open();
			break;
		case 3 : //跳转至诗词合集
			uni.navigateTo({
				url:"/pages/home/poetry"
			});
			break;
		case 4:
			uni.navigateTo({
				url:"/pages/home/devlopDoc"
			});
			break;
	};
};
// 点击加作者好友事件监听
const addAuthor=()=>{
	uni.previewImage({
		current:"https://www.qilin-web.cn:9527/assets/wechat-4f19f169.jpg",
		urls:["https://www.qilin-web.cn:9527/assets/wechat-4f19f169.jpg"]
	});
};
// 点击推荐项目事件监听
const recommandProject=()=>{
	uni.navigateTo({
		url:"/pages/home/project"
	});
};
// 点击友情链接事件监听
const friendLink=()=>{
	uni.navigateTo({
		url:"/pages/home/friendLink"
	});
};


/*
    生命周期等代码区域
*/


</script>

<style lang="scss">
.qilin-index{
	>.qilin-index-banner{
		>.swiper{
			height:400upx;
			.swiper-item{
				>.swiper-item-image{
					width:100%;
				}
			}
		}
	}
	>.qilin-index-infoNotice{
		padding:30upx 20upx 20upx;
		background-color:#fff;
		border-bottom:1upx solid var(--qilin-border-color);
		// box-shadow:0upx 0upx 12upx 0upx $support-text-color;
		>.swiper{
			height:100upx;
			.swiper-item{
				>.infoNotice-item{
					>.infoNotice-item-title{
						font-weight:bolder;
						font-size:30upx;
					}
					>.infoNotice-item-link{
						color:var(--qilin-color-primary);
						font-size:24upx;
						padding:8rpx 0;
					}
				}
			}
		}
	}
	>.qilin-index-nav{
		padding:20upx;
		background-color:#fff;
		border-bottom:1upx solid var(--qilin-border-color);
		width:100%;
		>.qilin-index-nav-list{
			width:100%;
			display:flex;
			align-items:center;
			white-space:nowrap;
			.qilin-index-nav-list-item{
				width:25%;
				display:inline-block;
				&:nth-child(2){
					width:30%;
				}
				>view{
					display:flex;
					flex-direction:column;
					align-items:center;
					>image{
						width:80upx;
						height:80upx;
						border-radius:$border-radius-card;
					}
					>text{
						padding-top:20upx;
						font-size:26upx;
					}
				}
			}
		}
	}
	>.qilin-index-grid{
		padding:30upx 20upx;
		>.qilin-index-grid-left{
			flex:1;
			padding:20upx;
			align-items:center;
			background-color:#fff;
			border-radius:$border-radius-card;
			box-shadow:$box-shadow-card;
			>image{
				width:100upx;
				height:100upx;
				border-radius:$border-radius-card;
			}
			>.title{
				font-size:30upx;
				font-weight:bolder;
				margin:10upx 0;
			}
			>.content{
				font-size:24upx;
				color:var(--qilin-color-info);
				margin-bottom:10upx;
			}
			>.tip{
				color:var(--qilin-color-warning);
				font-size:26upx;
			}
		}
		>.qilin-index-grid-right{
			flex:2;
			min-width:0;
			margin-left:20upx;
			image{
				width:50upx;
				height:50upx;
				border-radius:$border-radius-card;
			}
			>.qilin-index-grid-right-item{
				border-radius:$border-radius-card;
				align-items:center;
				&:not(:first-child){
					background-color:#fff;
					padding:14upx 12upx;
					box-shadow:$box-shadow-card;
				}
				&:not(:last-child){
					margin-bottom:20upx;
				}
				>.item{
					width:50%;
					align-items:center;
					background-color:#fff;
					border-radius:$border-radius-card;
					padding:14upx 12upx;
					box-shadow:$box-shadow-card;
					&:first-child{
						margin-right:20upx;
					}
					>text{
						flex:1;
						min-width:0;
						margin-left:8upx;
						font-size:24upx;
						font-weight:bolder;
					}
				}
				>.title{
					flex:1;
					min-width:0;
					font-size:24upx;
					font-weight:bolder;
					margin-left:8upx;
				}
			}
		}
	}
	>.qilin-index-project{
		background-color:#fff;
		>.qilin-index-project-title{
			align-items:center;
			justify-content:space-between;
			padding:30upx 30upx 40upx;
			border-bottom:1upx solid var(--qilin-border-color);
			letter-spacing:4upx;
			font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
			>text:first-child{
				font-size:30upx;
				font-weight:bolder;
				color:var(--qilin-color-primary);
				position:relative;
				font-style:oblique;
				&::after{
					content:"";
					position:absolute;
					width:80%;
					height:5upx;
					border-radius:$border-radius-box;
					bottom:-20%;
					left:0;
					background-image:linear-gradient(to right,#3c9cff,#5ac725);
				}
			}
			>text:last-of-type{
				font-size:25upx;
				font-weight:bolder;
			}
		}
		>.qilin-index-project-list{
			padding:30upx;
			>.qilin-index-project-list-item{
				>.qilin-index-project-list-item-content{
					position:relative;
					>image{
						width:100%;
						height:400upx;
						border-radius:$border-radius-box;
					}
					>.mark{
						position:absolute;
						top:0;
						right:0;
						padding:8upx;
						color:#fff;
						font-size:25upx;
						border-top-right-radius:$border-radius-box;
						background-image:linear-gradient(to right,#ffc108,#ff5724);
					}
					>.description{
						position:absolute;
						bottom:0;
						left:0;
						width:100%;
						color:#fff;
						padding:20upx;
						background-image:linear-gradient(to top,rgba(0,0,0,0.9),transparent);
					}
				}
				>.qilin-index-project-list-item-footer{
					margin-top:20upx;
					>.title{
						font-weight:bolder;
						font-size:30upx;
						letter-spacing:3upx;
					}
					>.board{
						margin-top:4upx;
						font-size:25upx;
						justify-content:space-between;
						>text{
							color:var(--qilin-color-info);
						}
						>.board-operation{
							>.board-operation-item{
								align-items:center;
								padding:0 6upx;
								text{
									color:var(--qilin-color-info) !important;
								}
								>text{
									padding-left:2upx;
									color:var(--qilin-color-info);
								}
							}
						}
					}
				}
			}
		}
	}
}
:deep(.uv-popup){
	.uv-popup__content{
		overflow: unset !important;
	}
	.uv-modal{
		overflow: unset !important;
		.uv-modal__content{
			padding:0;
		}
		.uv-line{
			display:none;
		}
	}
}
</style>

